<template>
  <div class="top-bar">
    <div class="container flex flex-row items-center">
      <div class="left-content">
        <n-button quaternary type="info" class="font-bold text-lg mr-[15px]"
          >信成医疗</n-button
        >
      </div>

      <UiMenu />

      <div class="right-content">
        <n-button circle class="mr-[15px]" @click="showSearchBar">
          <template #icon>
            <n-icon class="text-blue-500"><Search /></n-icon>
          </template>
        </n-button>

        <n-dropdown :options="menuOptions">
          <n-avatar
            round
            size="small"
            src="https://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg"
          />
        </n-dropdown>
      </div>
    </div>
  </div>
  <div class="h-[75px]"></div>
  <SearchBar ref="searchbar" />
</template>

<script setup>
import { NButton, NIcon, NDropdown, NAvatar } from "naive-ui";
import { Search } from "@vicons/ionicons5";
const menuOptions = [
  {
    label: "我的信息",
    key: "account",
  },
  {
    label: "退出",
    key: "logout",
  },
];
const searchbar = ref(null);
const showSearchBar = () => {
  searchbar.value.openDrawer();
  console.log("clicked");
};
</script>

<style>
.top-bar {
  z-index: 1000;
  @apply h-[60px] fixed left-0 right-0 top-0 flex flex-row items-center justify-center bg-white shadow-lg;
}
.right-content {
  @apply flex flex-row items-center justify-center ml-auto;
}
</style>
